<template>
  <div :class="`layout_sideBar ${menuFold ? 'fold' : ''}`">
    <logo />
    <el-scrollbar class="sideBar_scroll">
      <!-- <Menu v-if="menuRoutes.length > 0" :menu-fold="menuFold" :menu-list="menuRoutes" /> -->
      <el-menu
        :collapse="menuFold"
        :default-active="$route.path"
        background-color="#001529"
        text-color="white"
        active-text-color="yellowgreen"
      >
        <!--根据路由动态生成菜单-->
        <Menu :menuList="menuRoutes"></Menu>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import useUserStore from '@/store/modules/user'
import useCommonStore from '@/store/modules/common'
import Logo from '@/components/Logo.vue'
import Menu from '@/components/Menu.vue'
const { menuRoutes = [] } = useUserStore()
const { menuFold } = storeToRefs(useCommonStore())
import { useRoute, useRouter } from 'vue-router'
const $route = useRoute()
</script>

<style lang="scss" scoped>
.layout_sideBar {
  width: $sideBar-width;
  height: 100vh;
  background-color: $sideBar-bg;
  &.fold {
    transition: all 100ms ease-in-out;
    width: $sideBar-min-width;
  }
  .sideBar_scroll {
    height: calc(100vh - $topBar-height);
  }
}
</style>
